<template>
    <div class="common-layout">
        <el-container>
            <el-header>
                <div class="common-layout">
                    <el-container>
                        <el-aside width="650px">
                            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                                <el-form-item style="width:200px;">
                                    <el-input v-model="formInline.order" placeholder="用户账号" />
                                </el-form-item>

                                <el-form-item>
                                    <el-col :span="17">
                                        <el-date-picker v-model="formInline.date" type="date" placeholder="Pick a date"
                                            style="width: 100%" />
                                    </el-col>
                                </el-form-item>
                                <el-form-item style="width:80px;">
                                    <el-button type="primary" @click="reset">重置</el-button>
                                </el-form-item>
                                <el-form-item style="width:80px;">
                                    <el-button type="success">查询</el-button>
                                </el-form-item>
                            </el-form>
                        </el-aside>

                    </el-container>
                </div>
            </el-header>
            <el-main>
                <div class="common-layout">
                    <el-container style="display: block;">
                            <el-table :data="tableData" style="width: 100%" empty-text="暂无数据"
                                :header-cell-style="{ background: '#EFF0FD', color: '#606266' ,width:'100%'}">
                                <el-table-column fixed label="用户信息" prop="nickname"   show-overflow-tooltip/>
                                <el-table-column prop="username" label="用户账号"   show-overflow-tooltip />
                                <el-table-column prop="date" label="登录时间"   show-overflow-tooltip />
                                <el-table-column prop="IP" label="登录IP"   show-overflow-tooltip />
                            </el-table>
                            <div class="bar">
                                <span>总计 <span class="number">0</span> 条数据</span>
                                <el-pagination :page-size="20" :pager-count="11" layout="prev, pager, next"
                                    :total="100" />
                            </div>
                    </el-container>
                </div>
            </el-main>
        </el-container>
    </div>


</template>

<script>
export default {
    name: 'VueWithdrawal',

    data() {
        return {
            formInline: {
                nickname: '',
                username: '',
                date: '',
                IP: ''
            },
            tableData: [
                {
                    nickname: 'sunshine',
                    username: '19439204223',
                    date: '2022-10-10 23:22:33',
                    IP: '101.42.227.86'
                },
                {
                    nickname: 'sunshine',
                    username: '19439204223',
                    date: '2022-10-10 23:22:33',
                    IP: '101.42.227.86'
                }
            ]

        };
    },

    mounted() {

    },

    methods: {
        reset() {
            this.formInline = {
                user: '',
                order: '',
                status: '',
                date: ''
            }
        }
    },
};
</script>

<style lang="css" scoped>
.bar {
    border-top: 1px solid silver;
    line-height: 56px;
}

.number {
    color: red;
}

.el-main {
    padding: 0 !important;
}

.el-header {
    height: 50px;
    padding-left: 0;
}


.el-aside {
    overflow: hidden;
}

.el-form-item {
    margin-right: 10px;
}

.flex {
    margin-top: 20px;
}

/* 下方数据 */
.bottom-header {
    height: 370px;
}

.el-table {
    margin-top: 20px;
    box-shadow: 0 0 5px rgb(195, 206, 217);
}

.bottom-bar {
    border-top: 1px solid silver;
}

.el-pagination {
    float: left;
    margin-top: 10px;
}

.bottom-bar>span {
    margin-top: 16px;
    display: inline-block;

}
</style>